import React, { useState } from 'react'
import styles from './index.module.scss'
import { Modal, Toast } from 'antd-mobile'
import Icon from '@/components/Icon'
import { useSelector } from 'react-redux'
import { useDispatch } from 'react-redux'
import { setMoreAction, unLikeArticle, reportArtilce } from '@/store/actions/home'

export default function MoreAction() {
    const dispatch = useDispatch()
    const [type, setType] = useState('normal')
    const moreAction = useSelector(state => state.home.moreAction)
    const onClose = () => {
        setType('normal')
        dispatch(setMoreAction({
            visible: false,
            articleId: '',
            channelId: ''
        }))
    }

    const unLike = async () => {
        await dispatch(unLikeArticle(moreAction.articleId, moreAction.channelId))
        onClose()
        Toast.info('拉黑成功')
    }

    const list = [
        {id: 0, title: '其他问题'},
        {id: 1, title: '标题夸张'},
        {id: 2, title: '低俗色情'},
        {id: 3, title: '错别字多'},
        {id: 4, title: '旧闻重复'},
        {id: 5, title: '广告软文'},
        {id: 6, title: '内容不适'},
        {id: 7, title: '涉嫌违法犯罪'},
        {id: 8, title: '侵权'},
    ]

    const report = async (id) => {
        await dispatch(reportArtilce(moreAction.articleId, id, moreAction.channelId))
        onClose()
        Toast.info('举报成功')
    }

	return (
		<div className={styles.root}>
			<Modal
				className="more-action-modal"
				title=""
				transparent
				maskClosable
				footer={[]}
				onClose={onClose}
                visible={moreAction.visible}
			>
                <div className="more-action">
                    {type === 'normal' && (
                        <>
                            <div className="action-item" onClick={unLike}>
                                <Icon type="iconicon_unenjoy1" />不感兴趣
                            </div>
                            <div className="action-item"  onClick={() => setType('junk')}>
                                <Icon type="iconicon_feedback1"/>
                                <span className="text">反馈逻垃圾内容</span>
                                <Icon type="iconicon_right"/>
                            </div>
                            <div className="action-item">
                                <Icon type="iconicon_blacklist" /> 拉黑作者
                            </div>
                        </>
                    )}

                    {type==='junk' && (
                        <>
                            <div className="action-item" onClick={() => setType('normal')}>
                                <Icon type="iconfanhui" />
                                <span className="back-text">反馈逻辑内容</span>
                            </div>
                            {
                                list.map(item => (
                                    <div onClick={() => report(item.id)} key={item.id} className="action-item">{item.title}</div>
                                ))
                            }
                            <div className="action-item">
                                <span className="text">其他问题</span>
                                <Icon type="iconbtn_right"/>
                            </div>
                        </>
                    )}
                </div>
            </Modal>
		</div>
	)
}
